import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
  SafeAreaView,
  StatusBar,
} from 'react-native';
import { useNavigation, useRoute } from '@react-navigation/native';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

export default function DetailScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const { item } = route.params;
  const [cartItems, setCartItems] = useState(route?.params?.cartItems || []);
  const [addedToCart, setAddedToCart] = useState(false);

  const handleAddToCart = () => {
    if (!addedToCart) {
      const newItem = {
        ...item,
        quantity: 1,
        image: item.image
      };
      setCartItems([...cartItems, newItem]);
      setAddedToCart(true);
    }
  };

  const images = {
    '../assets/1.jpg': require('../assets/1.jpg'),
    '../assets/2.jpg': require('../assets/2.jpg'),
    '../assets/3.jpg': require('../assets/3.jpg'),
    '../assets/4.jpg': require('../assets/4.jpg'),
    '../assets/5.jpg': require('../assets/5.jpg'),
    '../assets/6.jpg': require('../assets/6.jpg'),
    '../assets/7.jpg': require('../assets/7.jpg'),
    '../assets/8.jpg': require('../assets/8.jpg'),
  }
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="#E71B24" barStyle="light-content" />
      
      {/* Header */}
      
      <View style={styles.header}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={styles.backButton}>返回</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>商品详情</Text>
        <View style={styles.headerRight} />
      </View>

      <ScrollView showsVerticalScrollIndicator={false}>
        {/* Product Image */}
    
        <Image source={images[item.image]} style={styles.productImage} />

        {/* Product Info */}
        <View style={styles.productInfo}>
          <Text style={styles.productTitle}>{item.title}</Text>
          <View style={styles.priceContainer}>
            <Text style={styles.price}>¥ {item.price}</Text>
            <Text style={styles.soldCount}>{item.num}人付款</Text>
          </View>
        </View>

        {/* Product Description */}
        <View style={styles.descriptionContainer}>
          <Text style={styles.descriptionTitle}>商品描述</Text>
          <Text style={styles.descriptionText}>
            这是一个高质量的游戏账号，包含以下特点：
            - 全英雄解锁
            - 多款限定皮肤
            - 高段位账号
            - 账号安全有保障
          </Text>
        </View>

        {/* 买家描述 */}
        <View style={styles.buyerInfoContainer}>
          <Text style={styles.buyerInfoTitle}>买家描述</Text>
          <View style={styles.buyerInfoRow}>
            <Text style={styles.buyerInfoLabel}>是否有防沉迷实名</Text>
            <Text style={styles.buyerInfoValue}>否</Text>
          </View>
          <View style={styles.buyerInfoRow}>
            <Text style={styles.buyerInfoLabel}>账号亮点</Text>
            <Text style={styles.buyerInfoValue}>该有的都有</Text>
          </View>
          <View style={styles.buyerInfoRow}>
            <Text style={styles.buyerInfoLabel}>极品皮肤</Text>
            <Text style={styles.buyerInfoValue}>56个</Text>
          </View>
          <View style={styles.buyerInfoRow}>
            <Text style={styles.buyerInfoLabel}>强势英雄</Text>
            <Text style={styles.buyerInfoValue}>李白、荆轲</Text>
          </View>
          <View style={styles.buyerInfoRow}>
            <Text style={styles.buyerInfoLabel}>是否有申诉记录</Text>
            <Text style={styles.buyerInfoValue}>无</Text>
          </View>
        </View>
      </ScrollView>

      {/* Bottom Action Bar */}
      <View style={styles.bottomBar}>
        <View style={styles.bottomIconGroup}>
          <TouchableOpacity style={styles.iconBtn}>
            <Text style={styles.iconText}>店铺</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.iconBtn}>
            <Text style={styles.iconText}>收藏</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity
          style={[styles.cartBtn, addedToCart && styles.cartBtnDisabled]}
          onPress={handleAddToCart}
          disabled={addedToCart}
        >
          <Text style={styles.cartBtnText}>
            {addedToCart ? '已加入购物车' : '加入购物车'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.buyBtn}
          onPress={() => navigation.navigate('CartScreen',{cartItems})}
        >
          <Text style={styles.buyBtnText}>去结算</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#E71B24',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: wp(4),
    paddingVertical: hp(1),
  },
  backButton: {
    color: '#fff',
    fontSize: wp(4),
  },
  headerTitle: {
    color: '#fff',
    fontSize: wp(4),
    fontWeight: 'bold',
  },
  headerRight: {
    width: wp(10),
  },
  productImage: {
    width: wp(100),
    height: wp(90),
    resizeMode: 'cover',
  },
  productInfo: {
    backgroundColor: '#fff',
    padding: wp(4),
    marginTop: hp(1),
  },
  productTitle: {
    fontSize: wp(4),
    fontWeight: 'bold',
    color: '#333',
    marginBottom: hp(1),
  },
  priceContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  price: {
    fontSize: wp(5),
    color: '#E71B24',
    fontWeight: 'bold',
    marginRight: wp(2),
  },
  soldCount: {
    fontSize: wp(3),
    color: '#999',
  },
  descriptionContainer: {
    backgroundColor: '#fff',
    padding: wp(4),
    marginTop: hp(1),
  },
  descriptionTitle: {
    fontSize: wp(4),
    fontWeight: 'bold',
    color: '#333',
    marginBottom: hp(1),
  },
  descriptionText: {
    fontSize: wp(3.5),
    color: '#666',
    lineHeight: hp(2.5),
  },
  bottomBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    height: 60,
    paddingHorizontal: 0,
  },
  bottomIconGroup: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
    justifyContent: 'flex-start',
    marginLeft: 10,
  },
  iconBtn: {
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  iconText: {
    fontSize: 12,
    color: '#888',
  },
  cartBtn: {
    backgroundColor: '#222',
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 4,
    marginRight: 8,
  },
  cartBtnDisabled: {
    backgroundColor: '#aaa',
  },
  cartBtnText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
  },
  buyBtn: {
    backgroundColor: '#E71B24',
    paddingVertical: 10,
    paddingHorizontal: 18,
    borderRadius: 4,
    marginRight: 10,
  },
  buyBtnText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: 'bold',
  },
  buyerInfoContainer: {
    backgroundColor: '#fff',
    padding: wp(4),
    marginTop: hp(1),
    borderRadius: wp(2),
  },
  buyerInfoTitle: {
    fontSize: wp(4),
    fontWeight: 'bold',
    color: '#333',
    marginBottom: hp(1),
  },
  buyerInfoRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: hp(0.8),
  },
  buyerInfoLabel: {
    color: '#888',
    fontSize: wp(3.2),
    width: wp(40),
  },
  buyerInfoValue: {
    color: '#222',
    fontSize: wp(3.2),
    textAlign: 'right',
    flex: 1,
  },
});